<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script type="text/javascript" src="./static/js/config.js"></script>
    <script type="text/javascript" src="./static/libs/axios/axios.min.js"></script>
    <script type="text/javascript" src="./static/libs/vue/vue.js"></script>
    <script type="text/javascript" src="./static/js/common.js"></script>
    <script type="text/javascript" src="./static/libs/element-ui/index.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100%;
        }

        #app {
            width: 100%;
            height: 100%;
        }

        .el-table__expanded-cell {
            padding: 0 0 0 0 !important;
        }
    </style>
</head>
<body>
<div id="app" v-loading="showLoading"
     element-loading-text="加载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-container>
        <el-header style="display: flex;align-content: center">
            <el-form style="margin-top: 20px;margin-left: 10px" :inline="true" :model="searchModel"
                     class="demo-form-inline">
                <el-form-item label="用户昵称">
                    <el-input size="mini" v-model="searchModel.nickname" placeholder="用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-cascader size="mini"
                                 clearable
                                 :options="depts"
                                 :props="{ expandTrigger: 'hover' }"
                                 @change="changeDept"></el-cascader>
                    <el-form-item>
                    </el-form-item>
                    <el-button size="mini" icon="el-icon-search" type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" icon="el-icon-plus" type="primary" @click="showAddDialog = true">新增用户
                    </el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column v-for="col in tableCols"
                                 v-if="!col.hidden"
                                 :label="col.label">
                    <template slot-scope="scope">
                            <span>
                                {{ col.formatter ? col.formatter(scope.row[col.prop]) : scope.row[col.prop] }}
                            </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
    <el-dialog :visible.sync="showAddDialog" title="新增用户" :close-on-click-modal="false">
        <el-form ref="form-add" :model="model" label-width="80px" :rules="rules" size="mini">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="model.nickname" placeholder="请输入用户昵称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户账号" prop="account">
                        <el-input v-model="model.account" placeholder="请输入用户账号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户密码" prop="password">
                        <el-input v-model="model.password" type="password" placeholder="请输入用户密码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="确认密码" prop="passwordConfirm">
                        <el-input v-model="model.passwordConfirm" type="password" placeholder="请确认用户密码"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户部门" prop="deptId">
                        <el-cascader clearable
                                     :options="depts"
                                     :props="{ expandTrigger: 'hover' }"
                                     @change="changeDeptForm"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户状态" prop="ableState">
                        <el-radio-group v-model="model.ableState">
                            <el-radio :label="0">正常</el-radio>
                            <el-radio :label="1">停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveAdd">确认</el-button>
            <el-button @click="showAddDialog = false">取消</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    const model = {
        nickname: "",
        account: "",
        password: "",
        passwordConfirm: "",
        deptId: null,
        ableState: 0
    };
    new Vue({
        el: "#app",
        data() {
            let validatePassword = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if(!/^[A-Za-z0-9]+$/.test(value)){
                    callback(new Error('密码至少需要6位数且不能超过12位'));
                }else if(value.length > 12 || value.length < 6){
                    callback(new Error('密码只能由英文字母和数字组成并以字母开头'));
                }else{
                    if (this.model.passwordConfirm !== '') {
                        this.$refs["form-add"].validateField('passwordConfirm');
                    }
                    callback();
                }
            };
            let validatePasswordConfirm = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.model.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                showLoading: false,
                baseUrl: "sysUser/",
                showAddDialog: false,   //是否显示新增弹窗
                tableData: [],       //用户列表
                tableCols: [],   //表格字段
                searchModel: {
                    nickname: "",
                    deptId: null,
                },
                model,
                depts: [],   //部门集合
                rules: {
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                        {max: 5, message: '昵称最大输入5个字符', trigger: 'blur'}
                    ],
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {max: 12, min: 5, message: '账号至少需要6位数且不能超过12位', trigger: 'blur'},
                        {pattern: /^[A-Za-z0-9]+$/, message: '账号只能由英文字母和数字组成并以字母开头', trigger: 'blur'}
                    ],
                    password: [
                        {required: true,validator:validatePassword,trigger:'blur'}
                    ],
                    passwordConfirm: [
                        {required: true,validator:validatePasswordConfirm,trigger:'blur'}
                    ],
                }
            }
        },
        watch: {},
        methods: {
            /** 获取表格数据 */
            getTableData(searchCondition) {
                this.showLoading = true;
                $http.post(this.baseUrl + "list", searchCondition).then(res => {
                    this.tableData = res.rows;
                    this.showLoading = false;
                })
            }
            ,
            getDepts() {
                this.showLoading = true;
                $http.post("sysDept/list").then(res => {
                    let depts = res.rows;
                    let _depts = depts.filter(d => d.pid === 0);
                    let deptsFormated = [];
                    _depts.forEach(d => {
                        let dept = {
                            value: d.id,
                            label: d.name
                        };
                        let children = depts.filter(_d => _d.pid === d.id);
                        let _children = [];
                        children.forEach(c => {
                            _children.push({
                                value: c.id,
                                label: c.name
                            });
                        });
                        dept.children = _children;
                        deptsFormated.push(dept);
                    });
                    this.depts = deptsFormated;
                    this.showLoading = false;
                })
            }
            ,
            changeDept(v) {
                this.searchModel.deptId = v[1] ? v[1] : null;
            }
            ,
            changeDeptForm(v) {
                this.model.deptId = v[1] ? v[1] : null;
            }
            ,
            handleEdit(index, row) {
                console.log(index, row)
            }
            ,
            handleDelete(index, row) {
                console.log(index, row)
            }
            ,
            search() {
                this.getTableData(this.searchModel);
            }
            ,
            /** 新增表单数据 */
            saveAdd() {
                this.$refs["form-add"].validate(valid => {
                    if (valid) {
                        this.showLoading = true;
                        $http.post(this.baseUrl + "add", this.model).then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: res.msg
                                });
                                this.showAddDialog = false;
                                this.resetModel();
                                this.getTableData();
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.showLoading = false;
                        })
                    }
                })
            }
            ,
            resetModel() {
                this.model = model;
            }
        },
        created() {
            this.showLoading = true;
            $http.post(this.baseUrl + "list").then(res => {
                this.tableData = res.rows;
                this.tableCols = [
                    {
                        prop: "id",
                        label: "主键id",
                        hidden: true
                    },
                    {
                        prop: "nickname",
                        label: "用户昵称"
                    },
                    {
                        prop: "account",
                        label: "账号"
                    },
                    {
                        prop: "createBy",
                        label: "创建人",
                        formatter:(v)=>{
                            return v ? this.tableData.find(u => u.id === v).nickname : '系统'
                        },
                    },
                    {
                        prop: "createTime",
                        label: "创建时间"
                    }
                ];
                this.getDepts();
            });
        }
    })
</script>
</html>